<template>
  <div class="reader-view" v-loading.lock="loading" element-loading-background="rgb(0, 0, 0)">
    <div class="reader-view-header">
      <div class="pdf-page">
        <div class="icon" @click="prevPage1">
          <span class="el-icon-arrow-left"></span>
          <span>上一篇</span>
        </div>
        <div class="icon" @click="nextPage1">
          <span>下一篇</span>
          <span class="el-icon-arrow-right"></span>
        </div>
      </div>
      <div class="pdf-full edu-icon-quanping" @click="openFullScreen"></div>
    </div>
    <div id="reader-content"></div>

    <el-dialog
      :visible.sync="dialogVisible"
      :show-close="false"
      fullscreen
      custom-class="reader-dialog"
    >
      <div class="reader-view-header">
        <div class="pdf-page">
          <div class="icon" @click="prevPage2">
            <span class="el-icon-arrow-left"></span>
            <span>上一篇</span>
          </div>
          <div class="icon" @click="nextPage2">
            <span>下一篇</span>
            <span class="el-icon-arrow-right"></span>
          </div>
        </div>
        <div class="pdf-full edu-icon-quanping" @click="closeFullScreen"></div>
      </div>
      <div id="reader-big"></div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Epub from 'epubjs'
import eventVue from '../sectiobWatchEventVue.js'
global.ePub = Epub
export default {
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      fileurl: '',
      timer: null,
      seconds: 0,
      dialogVisible: false,
      loading: false,
      rendition1: null,
      rendition2: null
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem
    })
  },
  mounted() {
    this.getPlayerFile()
    eventVue.$on('sendSectionBybus', () => {
      this.getPlayerFile()
    })
  },
  methods: {
    // 获取播放地址
    getPlayerFile() {
      this.seconds = 0
      this.timer = null
      this.loading = true
      clearInterval(this.timer)
      if (this.rendition1) {
        this.rendition1.destroy()
      }
      if (this.rendition2) {
        this.rendition2.destroy()
      }
      this.rendition1 = null
      this.rendition2 = null
      let class_id = this.detailInfo.course_type === 4 ? this.detailInfo.id : 0
      this.$api.getCourseSectionFileurl(
        this.getCurrentPlayItem.course_id,
        this.getCurrentPlayItem.id,
        {
          class_id: class_id
        },
        res => {
          const { data } = res
          // 当前播放定位
          this.$store.dispatch('course/setCurrentPlayPosition', {
            ...data.curr_position
          })

          this.fileurl = data.fileurl_string
          setTimeout(() => {
            this.showEpub()
            this.timing()
            this.loading = false
          }, 200)
        }
      )
    },
    showEpub() {
      const book = Epub(this.fileurl)
      this.rendition1 = book.renderTo('reader-content', {
        width: 800,
        height: 446,
        flow: 'paginated',
        spread: 'none'
      })
      this.rendition1.display()
    },
    nextPage1() {
      if (this.rendition1) {
        this.rendition1.next()
      }
    },
    prevPage1() {
      if (this.rendition1) {
        this.rendition1.prev()
      }
    },
    // 添加学习记录
    addLearning() {
      this.$api.createCourseRecord({
        course_id: this.getCurrentPlayItem.course_id,
        section_id: this.getCurrentPlayItem.id,
        current_time: this.seconds
      })
    },
    // 定时添加学习记录
    timing() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.seconds++
        if (this.seconds % 10 == 0) {
          this.addLearning()
        }
      }, 1000)
    },
    openFullScreen() {
      const book = Epub(this.fileurl)
      this.rendition2 = book.renderTo('reader-big', {
        width: '1200px',
        height: 'calc(100vh - 40px)',
        flow: 'paginated',
        spread: 'none'
      })
      this.rendition2.display()
      this.dialogVisible = true
    },
    nextPage2() {
      if (this.rendition2) {
        this.rendition2.next()
      }
    },
    prevPage2() {
      if (this.rendition2) {
        this.rendition2.prev()
      }
    },
    closeFullScreen() {
      this.dialogVisible = false
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.reader-view {
  height: 486px;
  #reader-content,
  #reader-big {
    height: 446px;
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 1.5;
    box-sizing: border-box;
    ::v-deep img {
      max-width: 100%;
    }
    ::v-deep .epub-container {
      margin: 0 auto;
    }
  }
  #reader-big {
    height: calc(100vh - 40px);
  }
  .reader-view-header {
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    background: #1a1a1a;
    .pdf-page {
      width: 200px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .icon {
        color: #fff;
        font-size: 14px;
        padding: 5px 6px;
        cursor: pointer;
      }
      .el-icon-arrow-left {
        margin-right: 5px;
      }
      .el-icon-arrow-right {
        margin-left: 5px;
      }
      .text {
        font-size: 13px;
        font-weight: 400;
        color: #ffffff;
        margin-left: 4px;
      }
      ::v-deep .el-input__inner {
        width: 40px;
        height: 20px;
        padding: 0;
        font-size: 13px;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        background: #252525;
        border-radius: 2px;
        border: 1px solid #555555;
      }
    }
    .pdf-full {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      cursor: pointer;
      margin-right: 30px;
      margin-left: auto;
    }
  }
  ::v-deep .reader-dialog {
    background: #000000;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      height: 100%;
      padding: 0;
      box-sizing: border-box;
    }
    .reader-content {
      width: 1200px;
      margin: 0 auto;
      min-height: calc(100vh - 10px);
    }
    .reader-fullScreen {
      position: fixed;
      bottom: 20px;
      right: 100px;
      z-index: 9999;
    }
  }
}
</style>
